<template>
  <div class="songListItem" @click="toSongList(item)">
    <div class="name">
      {{ item.name }}
      <svg
        t="1648291084739"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1594"
        width="200"
        height="200"
        @click.stop="playAll(item)"
      >
        <path
          d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z"
          fill="#dbdbdb"
          p-id="1595"
          class="fingerCursor"
        ></path>
      </svg>
    </div>
    <img
      :src="item.picUrl + '?imageView=1&type=webp&thumbnail=246x0'"
      :alt="item.name"
    />
  </div>
</template>

<script>

import store from "../../store";
import axios from "axios";

export default {
  name: "songListItem",
  props: ["item"],
  data() {
    return {};
  },

  mounted() {},

  methods: {
    toSongList(item) {
      this.$router.push("/home/songlist/" + item.id);
    },
    playAll(item) {
      axios
        .get(
          "https://apis.netstart.cn/music/playlist/detail?id=" +
            item.id
        )
        .then((res) => {
          store.commit('upload_playing_list', res.data.playlist.tracks);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>